{% extends "system_setup/base.html" %}
{% load state_display %}

{% block page_link %}
<script src="../../static/system_setup/js/base.js"></script>
<link rel="stylesheet" href="../../static/system_setup/css/style.css">
<script src="../../static/system_setup/js/base.js"></script>

{% endblock %}


{% block style %}
<style>
    .add_class {
        background: #1E90FF;
    }

    .li-class {
        list-style: none;
        margin-top: 2%;
        color: #0b0b0b;
        cursor: pointer;
    }

    .add_background {
        background: #A9A9A9;
    }

    tr {
        height: 35px;
    }

    th {
        text-align: center;
    }

    #clsq_table tr:hover {
        background: #cfcfcf;
    }

    #clsy_table tr:hover {
        background: #cfcfcf;
    }

    tbody td {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    td:first-child, th:first-child {
        position: sticky;
        left: 0; /* 首行永远固定在左侧 */
        z-index: 1;
    }

    thead tr th {
        position: sticky;
        top: 0; /* 列首永远固定在头部  */
        background-color: #E8E8E8;
    }

    th:first-child {
        z-index: 2;
    }

    .model_li {
        color: #3f414d;
        width: 25%;
        cursor: pointer;
        display: none;
    }

    .top_tag {
        border-bottom: #01AAED solid 2px;
        color: #01AAED;
    }

    .tab_top {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    .tab_top_right {
        float: right;
        width: 300px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
    }
    .search{
        width: 28%;
        display: flex;
        float: right;
        margin: 5.5px 0;
        margin-right: 0.5%;
        /*border: 1px solid red;*/
    }

    .search1{
        width: 95%;
        display: flex;
        float: right;
        margin: 5.5px 0;
        margin-right: 1%;
        /*border: 1px solid red;*/
    }

    .search1 input{
        vertical-align:middle;
        float: left;//左浮动
    flex: 4;
        height: 29px;
        width: 77%;
        outline: none;
        border: 1px solid #0070c1;
        box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2
    padding-left: 10px;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
    }

    .search1 button{
        float: right;
        flex: 1;
        height: 29px;
        width: 23%;
        line-height: 29px;
        background-color: #0070c1;
        color: white;
        border-style: none;
        outline: none;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

    .search1 button i{
        font-style: normal;
    }

    .search1 button:hover{
        font-size: 16px;
    }
</style>
{% endblock %}


{% block right_content %}
<div class="headline">
    <div id="document_addressee_details_tab" class="tab_top">
        科室管理
    </div>
    <div class="tab_top_right">
        <form role="search" method="get" id="searchform" action="./company_admin" style="font-size: 0;margin-top: 5px;">
            <input type="search" name="search_value" placeholder="搜索" value="{{ search_value }}" style="font-size: 14px;height: 30px;border: #00a0e9 solid 1px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;vertical-align: top;width: 200px;">
            <button type="submit" style="font-size: 14px;height: 30px;border: #00a0e9 solid 1px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;border-left: none;background: #00a0e9;color: white;line-height: 30px;vertical-align: top;"><span class="ion-ios-search-strong"> 搜索</span></button>
        </form>
    </div>
</div>

 <div id="new_models" style="width: 80%;height: 80%;position: absolute;display: none;">
        <div id="box" style="width: 700px;height: 500px;background: white;z-index: 10100;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #cfcfcf solid 1px;">
            <div style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                <h5 id="modal-title" class="modal-title" style="line-height: 50px;width: 10%;margin-left: 1%;display: inline-block;"></h5>
                <span onclick="close_models()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
            </div>
            <hr>
                <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;">
                    <div style="margin-top: 2%;">
                        <label><span style="color: red;"></span>科室名称：</label>
                        <input id="ks_name" type="text" placeholder="" style="width: 400px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;" disabled>
                    </div>
                    <div style="margin-top: 2%;">
                        <label><span style="color: red;visibility: hidden;"></span>&nbsp;&nbsp;主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任：</label>
                        <input onclick="fill_val(this, ele_id=this.id, types=true)" id="zhuren" type="text" placeholder="" style="width: 400px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;" data-toggle="modal" data-target=".bd-example-modal-xl">
                    </div>

                    <div style="margin-top: 2%;">
                        <label><span style="color: red;visibility: hidden;"></span>&nbsp;&nbsp;副&nbsp;主&nbsp;任：</label>
                        <input onclick="fill_val(this, ele_id=this.id, types=true)" id="fuzhuren" type="text" placeholder="" style="width: 400px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;" data-toggle="modal" data-target=".bd-example-modal-xl">
                    </div>

                    <div style="margin-top: 2%;">
                        <label><span style="color: red;visibility: hidden;"></span>&nbsp;&nbsp;护&nbsp;士&nbsp;长：</label>
                        <input onclick="fill_val(this, ele_id=this.id, types=true)" id="hushizhang" type="text" placeholder="" style="width: 400px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;" data-toggle="modal" data-target=".bd-example-modal-xl">
                    </div>
                    <div style="margin-top: 2%;">
                        <label><span style="color: red;"></span>科室简称：</label>
                        <input id="ksjc" type="text" placeholder="" style="width: 400px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;" disabled>
                    </div>
                    <div style="margin-top: 2%;">
                        <label><span style="color: red;visibility: hidden;"></span>分管领导：</label>
                        <select name="" id="fgld" style="width: 400px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;">
                            {% for foo in leaders %}
                            <option value="{{ foo.id }}">{{ foo.real_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            <hr>
            <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                <button id="add_big_limits_model" style="width: 100px;height: 36px;border: #dfdfdf solid 1px;margin-top: 7px;border-radius: 3px;">确认</button>
            </div>
        </div>
    </div>

<div class="right-box" style="width: 100%;height: 95%;margin-top: 0;">
    <div style="height: 93%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
        <table id="clsy_table" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0" cellpadding="2" width="100%" border="1">
            <thead>
            <tr>
                <th style="width: 5%;">序号</th>
                <th style="width: 20%;">科室名称</th>
                <th style="width: 12.5%;">主任</th>
                <th style="width: 12.5%;">副主任</th>
                <th style="width: 12.5%;">护士长</th>
                <th style="width: 12.5%;">科室简称</th>
                <th style="width: 12.5%;">分管领导</th>
                <th style="width: 12.5%;">操作</th>
            </tr>
            </thead>
            <tbody style="overflow: auto;" id="t_table1">
            {% for obj in objs %}
            <tr>
                <td style="text-align: center;">{{ obj.serial_number }}</td>
                {% if obj.id == 80 %}
                    <td style="padding-left: 5px;">院长办公室</td>
                {% else %}
                    <td style="padding-left: 5px;">{{ obj.name }}</td>
                {% endif %}
                <td style="text-align: center;">{{ obj.director_id.real_name }}</td>
                <td style="text-align: center;">{{ obj.deputy_director_ids.all | deal_audit }}</td>
                <td style="text-align: center;">{{ obj.head_nurse_id.real_name }}</td>
                <td style="text-align: center;">{{ obj.abbreviation }}</td>
                <td style="text-align: center;">{{ obj.leaders_id.real_name }}</td>
                <td style="text-align: center;"><a href='#' onclick='do_edit("{{ obj.name }}","{{ obj.abbreviation }}", "{{ obj.director_id.real_name }}", "{{ obj.deputy_director_ids.all | deal_audit }}", "{{ obj.head_nurse_id.real_name }}", "{{ obj.leaders_id.real_name }}",{{ obj.id }})'>编辑</a></td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <nav style="background: none;padding-top: 0.5%;" aria-label="Page navigation example">
        <div style="display: inline-block;margin-left: 2%;">
            <ul class="pagination">
                <li class="page-item "><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;border-top-left-radius: 4px;border-bottom-left-radius: 4px;" href="./company_admin?page=1&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >首页</a></li>
                {% if objs.has_previous %}
                <li class="page-item"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="./company_admin?page={{ objs.previous_page_number }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >上一页</a></li>
                {% else %}
                <li class="page-item disabled"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >上一页</a></li>
                {% endif %}

                {% for item in page_range %}
                {% if item == currentPage %}
                <li class="page-item active"><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;" href="./company_admin?page={{ item }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
                {% else %}
                <li class="page-item"><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;" href="./company_admin?page={{ item }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
                {% endif %}
                {% endfor %}

                {% if objs.has_next %}
                <li class="page-item"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="./company_admin?page={{ objs.next_page_number }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >下一页</a></li>
                {% else %}
                <li class="page-item disabled"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >下一页</a></li>
                {% endif %}
                <li class="page-item" style="border-left: none;"><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;border-top-right-radius: 4px;border-bottom-right-radius: 4px;" href="./company_admin?page={{ paginator.num_pages }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >尾页</a></li>
            </ul>
        </div>
        <div style="display: inline-block;margin-left: 1%;">共 {{ paginator.count }} 条数据</div>
    </nav>

</div>

<div style="z-index: 11000" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="margin-top: 3%;">
        <div class="modal-content"
             style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
            <div class="modal-header" style="height: 50px;">
                <h5 id="model_title" class="modal-title" style="line-height: 50px;width: 10%;margin-left: 2%;"></h5>
                <button id="close-model" type="button" class="close" data-dismiss="modal" aria-label="Close"
                        style="margin-right: 3%;line-height: 50px;">
                    <span aria-hidden="true" style="font-size: 28px;"><i class="iconfont icon-quchu"></i></span>
                </button>
            </div>
            <div class="modal-body" style="height: 200px;padding: 1%;">
                <div style="display: inline-block;width: 30%;height: 100%;border-right: #E8E8E8 solid 1px;">
                    <div style="width: 100%;height: 35px;color: #0b0b0b;text-align: center;">
                        <div class="search1" style="vertical-align: center;">
                            <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                            <button id="search_button">搜索</button>
                        </div>
                    </div>
                    <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;color: #0b0b0b;border-bottom: #cfcfcf solid 1px;">
                        <div id="an_branch"
                             style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;color: #01aaed;">
                            按部门
                        </div>
                        <div id="an_rank"
                             style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按权限
                        </div>
                        <div id="an_func"
                             style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按职能
                        </div>
                    </div>
                    <div id="department_list" style="width: 100%;height: 85%;overflow: auto;">
                        <div style="width: 100%;height: 100%;text-align: center;">
                            <img style="width: 30%;height: 30%;margin-top: 35%;" src="../../static/public_file/images/jiazai.gif" alt="">
                        </div>
                    </div>
                </div>

                <div style="display: inline-block;width: 68.5%;height: 100%;overflow: auto;vertical-align: top;left: 0;">
                    <table class="table table-hover table-bordered"
                           style="border-collapse: collapse;margin: 0;padding: 0;">
                        <thead>
                        <tr>
                            <th scope="col" style="width: 10%;">
                                <input id="all_select_checkbox" type="checkbox">
                            </th>
                            <th scope="col" style="width: 20%;">序号</th>
                            <th scope="col" style="width: 35%;">姓名</th>
                            <th scope="col" style="width: 35%;">工号</th>
                        </tr>
                        </thead>
                        <tbody style="overflow: auto;" id="t_table2"></tbody>
                    </table>
                    <div id="img-display1" style="width: 75%;text-align: center;">
                        <div style="margin-top: 10%;">
                            <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                            <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                        </div>
                    </div>
                </div>

                <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;display: none;">
                    <div id="checked-label" style="margin-top: 1%;margin-left: 3%;width: 90%;">

                    </div>
                </div>

            </div>
            <div class="modal-footer" style="height: 50px;">
                <button id="model-affirm" type="button" class="btn btn-primary"
                        style="margin-left: 2%;margin-right: 2%;border-radius: 3px;height: 35px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block script %}
<script>
    window.onload = function () {
        document.getElementById("loading").style.display = "none";
        document.getElementById("SuperSU_ul").style.display = "inline-block";
        document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
        document.getElementById("company_admin").className = "add_class";
        document.getElementById("system-management").className = "add-nav-active";
    };

    function do_edit(name, abbreviation, zr, fzr, hsz, fgld, id) {
        console.log(name, abbreviation, zr, fzr, hsz, fgld)
        document.getElementById("new_models").style.display="table";
        document.getElementById('ks_name').value = name;
        document.getElementById('zhuren').value = zr;
        document.getElementById('fuzhuren').value = fzr;
        document.getElementById('hushizhang').value = hsz;
        document.getElementById('fgld').value = fgld;
        document.getElementById('ksjc').value = abbreviation;
        document.getElementById("add_big_limits_model").setAttribute("onclick", "add_big_limits_model(id=" + id + ")");

        var optionElements = document.getElementsByTagName("option");
        //2 遍历option
        for(var i = 0; i<optionElements.length; i++) {
            if (optionElements[i].innerText === fgld) {
                optionElements[i].selected=true
            }
        }
    }
    function fill_val(obj, ele_id, types=false, job_numbers=false) {
        document.getElementById("new_models").style.display="table";
        var id = ele_id;
        sessionStorage.clear();
        document.getElementById("an_branch").style.color = "#01aaed";
        document.getElementById("an_rank").style.color = "#0b0b0b";
        document.getElementById("an_func").style.color = "#0b0b0b";
        document.getElementById("all_select_checkbox").checked = false;
        var check_box_list = document.getElementsByClassName("check_box");
        document.getElementById("search_button").setAttribute("onclick", "search_data()");
        document.getElementById("an_branch").setAttribute("onclick", "change_left_val(this.id)");   // 按部门
        document.getElementById("an_rank").setAttribute("onclick", "change_left_val(this.id)");     // 按权限
        document.getElementById("an_func").setAttribute("onclick", "change_left_val(this.id)");     // 按职能
        for (var t = 0; t < check_box_list.length; t++) {
            document.getElementById(check_box_list[t].id).checked = false;
        }
        document.getElementById("checked-label").innerHTML = "";

        document.getElementById("model_title").innerText = "选择执行人";

        document.getElementById("model-affirm").setAttribute("onclick", "summit_val1('"+ele_id+"')")

        // deltr1();
        document.getElementById("img-display1").style.display = "inline-block";
        if (window.branch_list) {
            var branch_list = window.branch_list;
            var department_list = document.getElementById("department_list");
            department_list.innerHTML = "";
            var ul_tag = document.createElement("ul");
            ul_tag.style.fontSize = "0";
            ul_tag.style.margin = "0";
            ul_tag.style.padding = "0";
            for (var i = 0; i < branch_list.length; i++) {
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.innerHTML = "<p style='margin-left: 20%;'>" + branch_list[i] + "</p>";
                li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "')");
                li_tag.setAttribute("id", branch_list[i]);
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
            }
        } else {
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/technological/delegation", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.personnel_list = JsonDate["data"];
                        window.emp_info_dict = JsonDate["emp_info_dict"];
                        window.people_dict = JsonDate["people_dict"];
                        window.people_dict_new = JsonDate["people_dict_new"];
                        window.branch_list = JsonDate["branch_list"];
                        window.function_list = JsonDate["function_list"];
                        var department_list = document.getElementById("department_list");
                        department_list.innerHTML = "";
                        var ul_tag = document.createElement("ul");
                        ul_tag.style.fontSize = "0";
                        ul_tag.style.margin = "0";
                        ul_tag.style.padding = "0";
                        for (var i = 0; i < JsonDate["branch_list"].length; i++) {
                            var li_tag = document.createElement("li");
                            li_tag.style.fontSize = "14px";
                            li_tag.style.margin = "0";
                            li_tag.style.padding = "0";
                            li_tag.innerHTML = "<p style='margin-left: 20%;'>" + JsonDate["branch_list"][i] + "</p>";
                            li_tag.setAttribute("onclick", "choice_peopel('" + JsonDate["branch_list"][i] + "')");
                            li_tag.setAttribute("id", JsonDate["branch_list"][i]);
                            li_tag.className = "li-class";
                            ul_tag.appendChild(li_tag);
                            department_list.appendChild(ul_tag);
                        }
                    }
                }
            }
        }
    }

    function close_models() {
            document.getElementById("new_models").style.display="none";
    }

    function search_data() {
        var searchData = document.getElementById("search_data").value;
        let emp_info_dict = window.emp_info_dict;
        var searchValNum = 1;
        var t_table = document.getElementById("t_table2");
        t_table.innerHTML = '';
        for (var i in emp_info_dict){
            for (var j = 0; j<emp_info_dict[i].length;j++){
                if (emp_info_dict[i][j]['real_name'].indexOf(searchData) !== -1){
                    var elm = emp_info_dict[i];
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    var td1 = document.createElement("td");
                    var td2 = document.createElement("td");
                    var td3 = document.createElement("td");
                    td.innerHTML = "<input id='" + elm[j].real_name + "(" + elm[j].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + i + "\")'>";
                    td.style.textAlign = "center";
                    td1.innerHTML = searchValNum;
                    td1.style.textAlign = "center";
                    td2.innerHTML = elm[j].real_name;
                    td2.title = elm[j].real_name;
                    td2.style.textAlign = "center";
                    td3.innerHTML = elm[j].job_number;
                    td3.title = elm[j].job_number;
                    td3.style.textAlign = "center";
                    tr.appendChild(td);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    t_table.appendChild(tr);
                    searchValNum += 1;
                    document.getElementById("img-display1").style.display = "none";
                }
            }
        }
    }

    function change_left_val(ele_id) {
        if (ele_id === "an_rank") {
            document.getElementById("an_branch").style.color = "#0b0b0b";
            document.getElementById("an_func").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var new_branch_list = ["书记、院长:A", "院领导:B", "职能科室负责人:C", "临床医技科室负责人:D", "副主任:G", "护士长:E","普通员工:F"];
            var new_department_list = document.getElementById("department_list");
            var new_ul_tag = document.createElement("ul");
            new_ul_tag.style.fontSize = "0";
            new_ul_tag.style.margin = "0";
            new_ul_tag.style.padding = "0";
            for (var EF = 0; EF < new_branch_list.length; EF++) {
                var new_li_tag = document.createElement("li");
                new_li_tag.style.fontSize = "14px";
                new_li_tag.style.margin = "0";
                new_li_tag.style.padding = "0";
                new_li_tag.style.paddingLeft = "5%";
                new_li_tag.innerHTML = "<p>" + new_branch_list[EF].split(":")[0] + "</p>";
                new_li_tag.setAttribute("onclick", "choice_peopel_1('" + new_branch_list[EF].split(":")[1] + "')");
                new_li_tag.setAttribute("id", new_branch_list[EF].split(":")[1]);
                // new_li_tag.setAttribute('style', "cursor: por")
                new_li_tag.className = "li-class";
                new_ul_tag.appendChild(new_li_tag);
                new_department_list.appendChild(new_ul_tag);
            }
        } else if (ele_id === 'an_func') {
            document.getElementById("an_branch").style.color = "#0b0b0b";
            document.getElementById("an_rank").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var department_list_1 = document.getElementById("department_list");
            var ul_tag_1 = document.createElement("ul");
            ul_tag_1.style.fontSize = "0";
            ul_tag_1.style.margin = "0";
            ul_tag_1.style.padding = "0";
            var function_list = window.function_list;
            var func_list = [];
            for (var tt in function_list['function_dict']) {
                func_list.push(tt);
            }
            console.log(func_list)
            for (var AB = 0; AB < func_list.length; AB++) {
                var new_li_1 = document.createElement("li");
                new_li_1.style.fontSize = "14px";
                new_li_1.style.margin = "0";
                new_li_1.style.padding = "0";
                new_li_1.style.paddingLeft = "5%";
                new_li_1.innerHTML = "<p>" + func_list[AB] + "</p>";
                new_li_1.setAttribute("onclick", "choice_peopel_2('" + function_list['function_dict'][func_list[AB]] + "')");
                new_li_1.setAttribute("id", function_list['function_dict'][func_list[AB]]);
                new_li_1.className = "li-class";
                ul_tag_1.appendChild(new_li_1);
                department_list_1.appendChild(ul_tag_1);
            }
        } else {
            document.getElementById("an_rank").style.color = "#0b0b0b";
            document.getElementById("an_func").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var branch_list = window.branch_list;
            var department_list = document.getElementById("department_list");
            department_list.innerHTML = "";
            var ul_tag = document.createElement("ul");
            ul_tag.style.fontSize = "0";
            ul_tag.style.margin = "0";
            ul_tag.style.padding = "0";
            for (var i = 0; i < branch_list.length; i++) {
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.innerHTML = "<p style='margin-left: 20%;'>" + branch_list[i] + "</p>";
                li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "')");
                li_tag.setAttribute("id", branch_list[i]);
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
            }
        }
    }

    function add_big_limits_model(id=false) {
        var ks_name = document.getElementById("ks_name").value;           // 名称
        var ksjc = document.getElementById("ksjc").value;             // 简称
        var zhuren = document.getElementById("zhuren").value;            // 主任
        var fuzhuren = document.getElementById("fuzhuren").value;       // 副主任
        var hsz = document.getElementById("hushizhang").value;          // 护士长
        var fgld = document.getElementById("fgld").value;           // 分管领导
        console.log(ks_name, ksjc, zhuren, fuzhuren, hsz, fgld)

        // if (!ks_name){
        //     alert("请填写科室名称！");
        //     return false;
        // }else if (!ksjc){
        //     alert("请填写科室简称！");
        //     return false;
        // }else if (!groups){
        //     alert("请选择权限组！");
        //     return false;
        // }
        close_models();
        document.getElementById("loading").style.display = "inline-block";
        {#document.getElementById("close-add-limits").click();#}
        var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/personal-center/company_admin", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("zhuren="+String(zhuren)+"&fuzhuren="+String(fuzhuren)+"&hsz="+String(hsz)+"&fgld="+String(fgld)+"&id="+String(id));
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var JsonDate = JSON.parse(xhr.responseText);
                            if (JsonDate['code'] === 200) {
                                alert('修改成功')
                                window.location.reload();
                                {#console.log('JsonDate', JsonDate)#}
                            } else {
                                alert(JsonDate['message'])
                                window.location.reload();
                            }

                        }
                    }
                }

    }

    // 删除列表
    function deltr1() {
        var tb = document.getElementById('t_table2');
        var rowNum = tb.rows.length;
        for (i = 0; i < rowNum; i++) {
            tb.deleteRow(i);
            rowNum = rowNum - 1;
            i = i - 1;
        }
    }

    function choice_peopel(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        var emp_info_dict = window.emp_info_dict;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', '" + chose_id + "')");

        for (var i = 0; i < emp_info_dict[choice_key].length; i++) {
            var elm = emp_info_dict[choice_key]
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            {#console.log('elm[i]', elm[i])#}
            td.innerHTML = "<input id='" + elm[i].real_name+"("+elm[i].job_number+')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }

        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    // 选择委托人
    function choice_consignor(ele_id, chose_id, choice_key) {
        chose_id = 'executor2';
        if (chose_id === "executor2" || chose_id === "executor4") {
            var dataStr = sessionStorage.getItem(choice_key);
            var dataList = [];
            if (dataStr) {
                sessionStorage.setItem(choice_key, dataStr + ", " + ele_id)
            } else {
                sessionStorage.setItem(choice_key, ele_id)
            }

            if (chose_id === "executor2") {
                var tag_id = "executor_str";
            } else {
                tag_id = "executor_str1";
            }
            var executor_str = document.getElementById(tag_id);
            if (executor_str) {
                if (document.getElementById(ele_id).checked) {
                    if (executor_str.innerText.trim()){
                        document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + ele_id;
                    }else {
                        document.getElementById(tag_id).innerHTML = ele_id;
                    }
                } else {
                    var str_push = [];
                    var executor_list = executor_str.innerText.split(", ");
                    for (var kl = 0; kl < executor_list.length; kl++) {
                        if (executor_list[kl] !== ele_id) {
                            str_push.push(executor_list[kl])
                        }
                    }
                    document.getElementById(tag_id).innerHTML = str_push.join(", ")
                }
            } else {
                document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + ele_id + "</span>";
            }
        } else {
            check_more_one_not(ele_id);
            document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;'>" + ele_id + "</span>";
        }

    }

    function summit_val1(ele_id) {
        var executor111 = '';
        var checked_label = document.getElementById("checked-label");
        for (var j = 0; j < checked_label.children.length; j++) {
            executor111 = executor111 + checked_label.children[j].innerText.trim() + ", ";
        }
        document.getElementById("close-model").click();
        var executor = executor111.slice(0, -2);
        document.getElementById(ele_id).value=executor;
    }

    var box = document.getElementById('box');
    var isDown = false;
    var mouse = {};
    box.onmousedown = (e) => {
        isDown = true;
        isDown_1 = false;
        //保存初始位置
        mouse = {
            startX: e.clientX,
            startY: e.clientY,
            offsetLeft: box.offsetLeft,
            offsetTop: box.offsetTop,
        }
    };

    box.onmousemove = (e) => {
        if (!isDown) {
            return
        }
        //计算偏移位置
        var offsetLeft = mouse.offsetLeft + e.clientX - mouse.startX;
        var offsetTop = mouse.offsetTop + e.clientY - mouse.startY;

        //设置偏移距离的范围[0,window.innerWidth - 400]
        offsetLeft = Math.max(0, Math.min(offsetLeft, window.innerWidth - 400));
        offsetTop = Math.max(0, Math.min(offsetTop, window.innerHeight - 400));

        box.style.left = offsetLeft + 'px';
        box.style.top = offsetTop + 'px';

    };
    //当鼠标滑的太快时，容易移出box，所以在window上监听此事件
    window.onmouseup = () => {
        isDown = false;
        box.style.cursor = 'default';
        mouse = null;
    };

    function close_models() {
        document.getElementById("new_models").style.display="none";
    }

    // 创建右侧选择人员列表
    function choice_peopel_1(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        var people_dict = window.people_dict;
        var people_dict_new = window.people_dict_new;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
        for (var i = 0; i < people_dict_new[choice_key].length; i++) {
            var elm = people_dict_new[choice_key];
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            {#console.log('elm[i]', elm[i])#}
            td.innerHTML = "<input id='" + elm[i].real_name+'('+elm[i].job_number+')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }
        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    // 创建右侧选择人员列表
    function choice_peopel_2(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }

        var people_dict_new = window.function_list;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
        for (var i = 0; i < people_dict_new[choice_key].length; i++) {
            var elm = people_dict_new[choice_key];
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            {#console.log('elm[i]', elm[i])#}
            td.innerHTML = "<input id='" + elm[i].real_name + '(' + elm[i].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }
        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }
</script>
{% endblock %}
